<template>
  <div class="relative">
    <input
      v-if="type === TYPE_TEXT"
      class="border-gray-200 dark:border-zinc-600 dark:bg-zinc-800 duration-100 dark:text-zinc-400 border-[1px] outline-0 py-[0.05rem] px-[.1rem] text-sm rounded-[3px] focus:border-blue-400 w-full"
      type="text"
      v-model="text"
      :maxlength="max"
    />
    <textarea
      v-if="type === TYPE_TEXTAREA"
      v-model="text"
      :maxlength="max"
      rows="5"
      class="border-gray-200 dark:border-zinc-600 dark:bg-zinc-800 duration-100 dark:text-zinc-400 border-[1px] outline-0 py-[0.05rem] px-[.1rem]text-sm rounded-[3px] focus:border-blue-400 w-full"
    ></textarea>
    <span
      v-if="max"
      class="absolute right-[10px] bottom-[5px] text-zinc-400 text-xs"
      :class="{ 'text-red-700': currentTextNumber === parseInt(max) }"
      >{{ currentTextNumber }} / {{ max }}</span
    >
  </div>
</template>

<script>
const TYPE_TEXT = 'text'
const TYPE_TEXTAREA = 'textarea'
</script>

<script setup>
import { ref, defineEmits, computed, watch } from 'vue'

const props = defineProps({
  modelValue: {
    required: true,
    type: String
  },
  type: {
    type: String,
    default: TYPE_TEXT,
    validator(value) {
      const arr = [TYPE_TEXT, TYPE_TEXTAREA]
      const result = arr.includes(value)
      if (!result) {
        throw new Error(`type 的值必须在可选范围内 [${arr.join('、')}]`)
      }
      return result
    }
  },
  max: {
    type: [String, Number]
  }
})

// 事件声明
const emits = defineEmits(['update:modelValue'])

// 输入的字符
const text = ref(props.modelValue)

// 输入的字符数
const currentTextNumber = computed(() => text.value.length)

watch(text, (val) => {
  emits('update:modelValue', val)
})
</script>

<style lang="scss" scoped></style>
